<template>
    <view style="display: flex;align-items: center;flex-direction: column;">
        <view style="width: 750rpx;display: flex;align-items: center;background-color: #FFFFFF;flex-direction: column;">
            <view style="width: 400rpx;">
                <u-tabs :list="listUtabs" active-color="#16a5fe" inactive-color="#606266" font-size="30"
                    :current="currentUtabs" @change="onChangeUtabs">
                </u-tabs>
            </view>

        </view>
        <view style="background-color: #FFFFFF;width: 750rpx;margin-top: 1px;margin-bottom: 1px;">
            <u-search placeholder="请输入文章标题" height="78" margin="30rpx" @search="onTitleSearch" @clear="onTitleClear"
                @change="onTitleChange" :show-action="false" v-model="keyword"></u-search>
        </view>


        <view class="articleContainer" v-for="(item,index) in articleObj.list" :key="index" @click="onSelectActivity(index)">
            <image class="icon" v-if="selectIndex!=index" src="../static/image/poster_choose_k_n.png" mode=""></image>
            <image class="icon" v-else src="../static/image/poster_choose_k_s.png" mode=""></image>
            <image class="logo" :src="item.cover" mode=""></image>
            <view class="right">
                <view class="title text-1line-ellipsis">
                    {{item.title}}
                </view>
                <view class="introduce text-1line-ellipsis">
                    发布时间：{{item.createTime}}
                </view>
            </view>
        </view>
        <view style="height: 300rpx;">
            
        </view>
        <view class="bottomContainer">
            <view class="cancelBtn" @click="onCancelBtn">
                取消
            </view>
            <view class="confirmBtn" @click="onConfirmBtn">
                确定
            </view>
        </view>
    </view>
</template>

<script>
    let App = getApp();
    const api = require('@/static/js/api.js')
    const utils = require("@/static/js/utils.js")
    let that = this
    export default {
        data() {
            return {
                articleType: 1,
                articleSearchTitle: "",
                articleObj: {
                    list: [],
                    loadStatus: "loading",
                    pageIndex: 1,
                },
                selectIndex: 0,

                listUtabs: [{
                    name: '个人文章'
                }, {
                    name: '企业文章'
                }],
                currentUtabs: 0,
                keyword: "",
            };
        },
        onLoad() {
            that = this      
            this.getArticleList()
        },
        onShow() {
            // that.clearListShow(that.articleObj)
            // that.getArticleList()
        },
        onUnload() {

        },

        onReachBottom() {
            this.getArticleList()
        },
        methods: {
            onCancelBtn(){
                uni.navigateBack({
                    
                })
            },
            onConfirmBtn(){
                if (that.articleObj.list.length > 0) {
                    App.globalData.selectObj.type = 1;
                    App.globalData.selectObj.typeTitle = that.articleObj.list[that.selectIndex].title;
                    App.globalData.selectObj.typeValue = that.articleObj.list[that.selectIndex].id;
                }
                uni.navigateBack({
                    
                })
            },
            
            
            //===顶部tab
            onChangeUtabs(item) {
                var index = item.index
                var e = 0;
                that.currentUtabs = index;
                if (that.currentUtabs == 0) {
                    e = 1
                }

                if (that.articleType != e) {
                    that.selectIndex = 0;
                    that.clearListShow(that.articleObj)
                    that.articleType = e;
                    that.getArticleList()
                }

            },
            
            onSelectActivity(index){
                
                that.selectIndex = index;
            },


            getArticleList() {
                api.getArticleList({
                    param: {
                        limit: 5,
                        page: that.articleObj.pageIndex,
                        ownerType: that.articleType,
                        title: that.articleSearchTitle,
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        that.pushListShow(that.articleObj, res.data)
                    }
                })
            },

            onTitleChange(e) {
                if (e.length == 0) {
                    that.articleSearchTitle = "";
                    that.clearListShow(that.articleObj)
                    that.getArticleList();
                }
            },
            onTitleClear() {
                that.articleSearchTitle = "";
                that.clearListShow(that.articleObj)
                that.getArticleList();
            },
            onTitleSearch(e) {
                console.log("onTitleSearch:", that.articleSearchTitle);
                that.articleSearchTitle = e;
                that.clearListShow(that.articleObj)
                that.getArticleList();
            },
            /**
             * @description: 列表中添加数据
             * @param {number} id   u-tabs-swiper的当前ID
             * @param {list}  列表
             * @return void
             */
            pushListShow(srcObj, pushlist) {
                if (pushlist && pushlist.length > 0) {
                    for (let i = 0; i < pushlist.length; i++) {
                        pushlist[i].createTime = utils.formatTime(pushlist[i].createTime, 'yyyy-MM-dd')
                        srcObj.list.push(pushlist[i])
                    }
                    srcObj.pageIndex++;

                    if (pushlist.length == 10) {
                        srcObj.loadStatus = "loadmore"
                    } else {
                        srcObj.loadStatus = "nomore"
                    }
                } else {
                    srcObj.loadStatus = "nomore"
                }
            },

            //----清空列表
            clearListShow(srcObj) {
                srcObj.pageIndex = 1;
                srcObj.list.splice(0, srcObj.list.length)
            },
        }

    }
</script>
<style>
    page {
        background-color: #F3F3F3;
    }
</style>

<style lang="scss">
    .articleContainer {
        width: 750rpx;
        height: 193rpx;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        margin-bottom: 1px;

        .icon {
            width: 36rpx;
            height: 36rpx;
            margin-left: 30rpx;
            margin-right: 24rpx;
        }

        .logo {
            width: 210rpx;
            height: 144rpx;
            border-radius: 10rpx;
            margin-right: 17rpx;
        }

        .right {
            .title {
                width: 400rpx;
                font-size: 30rpx;
                color: #121212;
                margin-bottom: 60rpx;
            }

            .introduce {
                width: 400rpx;
                font-size: 26rpx;
                color: #ababab;
            }
        }
    }
    
    .bottomContainer{
        width: 750rpx;
        height: 190rpx;
        background-color: #ffffff;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        padding-top: 24rpx;
        justify-content: space-evenly;
        .cancelBtn{
            width: 331rpx;
            height: 96rpx;
            border-radius: 48rpx;
            border: solid 2rpx #16a5fe;
            font-size: 32rpx;
            color: #16a5fe;
            line-height: 96rpx;
            text-align: center;
        }
        .confirmBtn{
            width: 331rpx;
            height: 96rpx;
            background-color: #16a5fe;
            border-radius: 48rpx;
            font-size: 32rpx;
            color: #ffffff;
            line-height: 96rpx;
            text-align: center;
        }
        
    }
    
</style>
